Day25 【牙起來】 路由設定(Router) - Angular

關於RxJS後續部分的深入

關於應用想到了幾個實際運用場合
但小弟還需花點時間建設環境，未來幾天會再把文章補上

今天先來談談路由

Router 在Angular裡面可以到處加，只要有模組的地方就可以有路由

路由是一支.ts檔程式，檔案名稱為 ...routing.module.ts

由ng-cli建立路由

新建專案時產生路由

> ng new project04 --routing

新建模組時產生路由

> ng g m test --routing

也可以自己手動新增 ...routing.module.ts 的檔案

手動新增 routing

修改 app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { StoreComponent } from './store/store.component';
import { RoleComponent } from './role/role.component';

const routes: Routes = [
  // { path: '', component: AppComponent },
  { path: 'store', component: StoreComponent },
  { path: 'role', component: RoleComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

在 app.component.html 新增

<h1>更改網址後綴為 /store 或 /role</h1>
<router-outlet></router-outlet>

此時的 <router-outlet> 代表的就是 會變動的Router 囉

http://localhost:4200/role
http://localhost:4200/store

可以把app-routing.module.ts中註解掉的{ path: '', component: AppComponent },
這一行補上去試試效果，會發現首頁會出現了兩次相同的元素

因為Angular啟動預設執行一次AppComponent、Routes發現網址進來比對又執行一次AppComponent，造成非預期的效果

透過 routerLink 切換分頁

修改 app.component.html

<h1>更改網址後綴為 /store 或 /role</h1>
<router-outlet></router-outlet>

<button routerLink="store">點我進store</button>
<a routerLink="role">點我進role</a>

<br><br><br>

<div routerLink="">其實點我也能有效果，回首頁</div>

此時可以在元件內加上ngOnDestroy()
測試前面提到的生命週期物件摧毀時的效果

ngOnDestroy(): void {
 console.log('==== ngOnDestroy ====')
 alert('確定要切換分頁嗎？')
}

[routerLink] 與 routerLink 有何差別

• routerLink 是屬性(Attribute)
• [routerLink] 是屬性繫結(Property)，可帶入成員

<h1>更改網址後綴為 /store 或 /role</h1>
<router-outlet></router-outlet>

<button [routerLink]="router[0]">點我進store</button>
<a [routerLink]="'role'">點我進role</a>

<br><br><br>

<div [routerLink]="''">其實點我也能有效果，回首頁</div>

在app.component.ts新增router成員(Member)

export class AppComponent {

  title = 'project04';

  router = ['store', 'role']

  constructor() {
  }

}

與style=...和[style]='...'是相同的道理

你可以兩個同時使用，只是會被前輩敲頭而已